<template>
  <div class="register-event">
    <h1>活动注册</h1>
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="register-form"
    >
      <el-form-item label="活动名称" prop="eventName">
        <el-input v-model="form.eventName" placeholder="请输入活动名称" />
      </el-form-item>

      <el-form-item label="活动类型" prop="eventType">
        <el-select v-model="form.eventType" placeholder="请选择活动类型">
          <el-option label="展览" value="exhibition" />
          <el-option label="讲座" value="lecture" />
          <el-option label="工作坊" value="workshop" />
        </el-select>
      </el-form-item>

      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker
          v-model="form.startTime"
          type="datetime"
          placeholder="选择开始时间"
        />
      </el-form-item>

      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker
          v-model="form.endTime"
          type="datetime"
          placeholder="选择结束时间"
        />
      </el-form-item>

      <el-form-item label="活动地点" prop="location">
        <el-input v-model="form.location" placeholder="请输入活动地点" />
      </el-form-item>

      <el-form-item label="活动描述" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          rows="4"
          placeholder="请输入活动描述"
        />
      </el-form-item>

      <el-form-item label="参与人数" prop="maxParticipants">
        <el-input-number
          v-model="form.maxParticipants"
          :min="1"
          :max="1000"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null)
const form = reactive({
  eventName: '',
  eventType: '',
  startTime: '',
  endTime: '',
  location: '',
  description: '',
  maxParticipants: 50
})

const rules = {
  eventName: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  eventType: [
    { required: true, message: '请选择活动类型', trigger: 'change' }
  ],
  startTime: [
    { required: true, message: '请选择开始时间', trigger: 'change' }
  ],
  endTime: [
    { required: true, message: '请选择结束时间', trigger: 'change' }
  ],
  location: [
    { required: true, message: '请输入活动地点', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入活动描述', trigger: 'blur' }
  ],
  maxParticipants: [
    { required: true, message: '请输入参与人数', trigger: 'blur' }
  ]
}

const submitForm = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    // TODO: 提交表单数据
    ElMessage.success('提交成功')
  } catch (error) {
    ElMessage.error('请检查表单填写是否正确')
  }
}

const resetForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
}
</script>

<style scoped>
.register-event {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.register-form {
  margin-top: 20px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style> 